<template>
  <div class="box">
    <div class="selectBox">
      <div>
        <el-button
        v-waves
        class="filter-item btn"
        type="success"
        @click="showJs('xm')"
        size="small"
        round
        >修改厦门拉起js</el-button
      >
      <el-button
        v-waves
        class="filter-item btn"
        type="success"
        @click="handleJs"
        plain
        size="small"
        >重新生成推广文件</el-button
      >
      <el-button v-waves class="filter-item btn" size="small" type="success" @click="cleanNginx">清空nginx缓存</el-button>
      </div>
      <div style="padding-top: 50px">
        <el-button
        v-waves
        class="filter-item btn"
        type="success"
        @click="showJs('fz')"
        size="small"
        round
        >修改福州拉起js</el-button
      >
      </div>
      
      
    </div>
    <div class="selectBox" style="margin-top: 80px">
      <div
        v-for="(item, index) in linkArr"
        :key="index"
        style="margin-top: 10px"
      >
        {{ index === 0 ? "默认地址 ：" : "链接地址" + index + "：" }}
        <el-input
          v-model="linkArr[index].url"
          placeholder="请输入渠道JS的链接目录"
          style="width: 300px"
          class="filter-item linkMargin"
        />渠道号：
        <el-input
          v-model="linkArr[index].channel"
          placeholder="请输入渠道账号，多个用逗号隔开"
          style="width: 300px"
          class="filter-item"
        />
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          :disabled="index === 0"
          @click="handleDelLink(index, item)"
          >删除</el-button
        >
      </div>
      <div style="margin-top: 30px">
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item"
          type="success"
          icon="el-icon-plus"
          style="margin-right: 30px"
          @click="handleAddLink"
          >新增地址</el-button
        >
        <el-button
          plain
          size="small"
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          style="margin-left: 30px"
          @click="handupdata"
          >修改地址</el-button
        >
      </div>
    </div>
    <!-- :width="dialogWidth" -->
    <el-dialog :title="form.company == 'fz'? '修改福州js' :'修改厦门js'" :visible.sync="showForm">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="90px"
        class="fullwidth"
      >
      <el-form-item label="渠道">
        <el-select
            v-model="form.channel"
            style="width: 100%"
            filterable
            class="filter-item"
          >
            <el-option key label="未选择" value />
            <el-option
              v-for="value in qudaoArr"
              :key="value"
              :label="value"
              :value="value"
            />
          </el-select>
      </el-form-item>
        <el-form-item label="js" prop="pull_js">
          
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10 }"
            v-model.trim="form.pull_js"
            placeholder="请输入拉起js的代码"
          />
        </el-form-item>
        <div style="text-align: right">
          <el-button
            @click="
              showForm = false;
              form.pull_js = null;
            "
            size="small"
            round
            >取消</el-button
          >
          <el-button
            :loading="pullLoding"
            type="primary"
            @click="submitPull()"
            size="small"
            round
            >确定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPlatformConfig, addPlatformConfig,getChannelNameList } from "@/api/admin/admin";
import { createJs, createHtml, delLink, updatePullJs, clearCache } from "@/api/admin/clean";
import waves from "@/directive/waves"; // waves directive
import { MessageBox, Message } from "element-ui";
export default {
  name: "Clean",
  directives: { waves },
  data() {
    return {
      showForm: false,
      pullLoding: false,
      form: {
        pull_js: "",
        company: "",
        channel: ""
      },
      rules: {
        pull_js: [
          { required: true, message: "拉起js不能为空！", trigger: "blur" },
        ],
      },
      listQuery2: {
        url: "",
      },
      linkArr: [],
      upArr: {},
      qudaoArr: []
    };
  },
  created() {
    this.getList2();
    this.getChannelNameList()
  },
  methods: {
    //获取渠道列表
    getChannelNameList() {
      getChannelNameList().then((r) => {
        this.qudaoArr = r.DATA;
      });
    },
    getList2() {
      getPlatformConfig().then((response) => {
        this.linkArr = eval(response.DATA);
      });
    },
    showJs(company){
      this.form.company = company
      this.showForm = true
      this.form.channel = ''
    },
    //点击修改地址按钮
    handupdata() {
      let self = this;
      let obj = {
        data: JSON.stringify(this.linkArr),
      };
      addPlatformConfig(obj).then((response) => {
        if (response.STATUS === 200) {
          Message({
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
          self.getList2();
        }
      });
    },
    handleJs() {
      MessageBox.confirm("确定重新生成所有的JS文件吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          createJs().then((response) => {
            if (response.STATUS === 200) {
              Message({
                message: response.msg || "生成成功",
                type: "success",
                duration: 2000,
              });
            } else {
              Message({
                message: response.msg || "生成失败",
                type: "error",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    handleHtml() {
      MessageBox.confirm("确定重新生成所有的html文件吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          createJs().then((response) => {
            if (response.STATUS === 200) {
              Message({
                message: response.msg || "生成成功",
                type: "success",
                duration: 2000,
              });
            } else {
              Message({
                message: response.msg || "生成失败",
                type: "error",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    handleAddLink() {
      this.linkArr.push({
        domain: "",
        qudao: "",
      });
    },
    handleDelLink(num, item) {
      MessageBox.confirm("确定删除该链接吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (item.id) {
            const data = {
              id: item.id,
            };
            delLink(data).then((response) => {
              if (response.code === 1) {
                Message({
                  message: response.msg || "删除成功",
                  type: "success",
                  duration: 2000,
                });
                this.linkArr.splice(num, 1);
                this.getList();
              } else {
                Message({
                  message: response.msg || "删除失败",
                  type: "error",
                  duration: 2000,
                });
              }
            });
          } else {
            this.linkArr.splice(num, 1);
          }
        })
        .catch(() => {});
    },
    submitPull() {
      
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.pullLoding = true;
          updatePullJs(this.form).then((res) => {
            if (res.STATUS == 200) {
              this.$message.success("替换成功");
              this.form.pull_js = "";
            }
            this.pullLoding = false;
          });
        }
        
      });
    },
    cleanNginx(){
       MessageBox.confirm("清除缓存吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          clearCache().then((res) => {
             if (res.STATUS == 200) {
              this.$message.success("清除成功");
              this.form.pull_js = "";
            }
          })
        }).catch(() => {});
    }
    // handleUpdateLink() {
    //   const data = {
    //     data: this.linkArr,
    //   };
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "Loading",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });
    //   handleUpdateLink(data).then((response) => {
    //     loading.close();
    //     if (response.code === 1) {
    //       Message({
    //         message: response.msg || "修改成功",
    //         type: "success",
    //         duration: 2000,
    //       });
    //     } else {
    //       Message({
    //         message: response.msg || "修改失败",
    //         type: "error",
    //         duration: 2000,
    //       });
    //       this.getList2();
    //     }
    //   });
    // },
  },
};
</script>

<style scoped>
.box {
  margin: 200px auto;
  width: 1000px;
}
.selectBox {
  width: 100%;
  text-align: center;
}
.btnBox {
  margin-top: 30px;
  text-align: center;
}
.linkMargin {
  margin-right: 20px;
}
@media (max-width: 550px) {
  .box {
    margin: 200px auto;
    width: 320px;
  }
  .filter-item {
    margin-top: 10px;
  }
  .linkMargin {
    margin-right: 0px;
  }
}
</style>
